<template>
  <div class="menu">
    <div class="menu_btn">
      <n-space>
        <n-button type="info" @click="handleAdd">添加</n-button>
      </n-space>
    </div>
    <div class="menu_table">
      <n-data-table
          remote
          :data="list"
          :row-key="rowKey"
          :columns="columns"
          :bordered="true"
          :bottom-bordered="true"
          size="small"
          :pagination="false"
          :indent="24"
      ></n-data-table>
    </div>
    <MenuModal ref="modal" @list="getList({parent_id: '0'})"></MenuModal>
  </div>
</template>

<script lang="ts">
export default {
  name: "menu"
}
</script>

<script setup lang="ts">
import {onMounted, ref, h, watch, reactive} from "vue"
import MenuModal from '@/view/system/menu/MenuModal.vue'
import {ums_menu_delete, ums_menu_list} from '@/api/ums'
import {MenuListQuery, RowData} from '@/view/system/menu/MenuType'
import MenuListOperate from '@/view/system/menu/MenuListOperate.vue'
import useSystem from '@/hooks/useSystem'

const {error,success, list} = useSystem<RowData[]>()

const modal = ref<{
  init: (data?:RowData) => void
  edit: () => void
}>()
// 点击添加
const handleAdd = () => {
  modal.value?.init()
}

const rowKey = (row:RowData) => row.id

const columns = [
  {
    title: "菜单名称",
    key: "menu_name",
    align: 'center'
  },
  {
    title: "排序",
    key: "menu_order",
    align: 'center'
  },
  {
    title: "组件路径",
    key: "menu_path",
    titleAlign: "center",
    align: 'left'
  },
  {
    title: "菜单路径",
    key: "menu_url",
    titleAlign: "center",
    align: 'left'
  },
  {
    title: "操作",
    key: "id",
    align: 'center',
    width: 160,
    render(row:RowData) {
      return h(MenuListOperate,{
        onEdit() {
          modal.value?.init(row)
        },
        onDelete() {
          ums_menu_delete({id: row.menu_id}).then(res =>{
            if (res.code === 200) {
              success(res.message)
              getList({parent_id: '0'})
            }else {
              error(res.message)
            }
          })
        }
      })
    },
  }
]

const pagination = reactive({
  page: 1,
  pageSize: 10,
  itemCount: 0,
  onChange: (page: number) => {
    pagination.page = page
    getList({parent_id: '0'})
  },
})

// 获取列表
const getList = (data:MenuListQuery) => {
  ums_menu_list({
    current: pagination.page,
    pageSize: pagination.pageSize,
    data
  }).then(res => {
    if (res.code === 200) {
      pagination.itemCount = res.data.total
      pagination.pageSize = res.data.pageSize
      pagination.page = res.data.current
      const arr = res.data.list.sort((a,b) => a.menu_order - b.menu_order).map(async (item) => {
        const children = await ums_menu_list({
          current: 1,
          pageSize: 10,
          data: {
            parent_id: item.id.toString() as string
          }
        })
        return {
          ...item,
          children: children.data.list.sort((a,b) => a.menu_order - b.menu_order)
        }
      })
      Promise.all(arr).then(res => {
        list.value = res
      })
    }else {
      error(res.message)
    }
  })
}

onMounted( () => {
  getList({parent_id: '0'})
} )
</script>

<style scoped lang="scss">
.menu{
  height: 100%;
  overflow: hidden;
  &_btn{
    height: $systemHeader;
    display: flex;
    align-items: center;
  }
  &_table{
    height: calc(100% - $systemHeader);
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>
